<template>
	<view class="middle">
		<view class="bigPic">
			<img :src="bigPic" alt="" class="bigImg">
			<img :src="subPic1" alt="" class="subImg">
			<img :src="subPic2" alt="" class="subImg">
			<img :src="subPic3" alt="" class="subImg">
			<img :src="subPic4" alt="" class="subImg">
		</view>
	</view>
</template>

<script>
	export default {
		name: "Middle",
		props: ['bigPic', 'subPic1', 'subPic2', 'subPic3', 'subPic4'],
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="stylus">
	.middle
		height: 800upx
		width: 100%
		display: flex
		flex-wrap: wrap
		.bigPic
			height: 300upx
			width: 100%
			.bigImg
				height: 300upx
				width: 100%
				vertical-align: bottom
			.subImg
				height: 250upx
				width: 50%
				vertical-align: bottom
</style>